<template>
  <a-config-provider :locale="zh_CN">
    <div class="defaultLayout">
      <flex-header/>
      <flex-tool/>
      <flex-small/>
      <flex-content/>
    </div>
  </a-config-provider>
</template>

<script>
import FlexHeader from '@/components/Header.vue'
import FlexTool from '@/components/ToolsBar.vue'
import FlexContent from '@/components/Content.vue'
import FlexSmall from '@/components/smallTool.vue'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { mapMutations,mapState,mapActions} from 'vuex'
import account from '~/api/account'

moment.locale('zh-cn')

export default {
  components: {
    FlexHeader,
    FlexTool,
    FlexContent,
    FlexSmall
  },

  data() {
    return {
      zh_CN,
      msg_data: [],
    }
  },
  created() {
    let token = localStorage.getItem('token')
    this.setToken(token)
    if(token !== null && token !== undefined && token != '') {
      this.postToken().then((res)=>{
       if(res.data.code==200&&res.data.msg =='admin')
        {
            this.setSignIn(true)
            return Promise.resolve('OK')
        }
        else if(res.data.code==200&& res.data.msg=='student')
        {
            this.$router.push('/stuPage/stuDataPage')
            return Promise.reject('OK')
        }
        else
        {
            return Promise.reject(new Error(res.data.msg))
        }
      },(error)=>{
          return Promise.reject(error)
      }).catch((error)=>{
          return Promise.reject(error)
      })
      }
  },
  mounted() {
    this.$socket.emit('shake_hand', this.myToken)
  },
  computed:{
      ...mapState({
        account:state=> state.account.account,
        myToken:state=>state.account.token
      })
  },
  methods:{
    ...mapMutations({
      setSignIn:'account/setSignIn',
      setAccount:'account/setAccount',
      needUpdate:'needUpdate',
      setToken:'account/setToken'
    }),
    ...mapActions({
      postToken:'account/postToken',
    }),     
      openNotification(type,title,msg) {
      let iconType = ''
      let iconColor = ''
      if(type=='OK'){
        iconType = 'smile'
        iconColor = '#52c41a'
      }
      else
      {
        iconType = 'frown'
        iconColor = '#eb2f96'
      }
      this.$notification.open({
        message: title,
        description: msg,
        icon: h => h('a-icon', {
          props: {
            type: iconType,
            theme: 'twoTone',
            'two-tone-color': iconColor
          }
        }),
       
      });
    }
  },
  sockets: {
    refused(message) {
      this.openNotification('NOK', 'WebSocket拒绝连接', message)
      console.log('************', message)
    },
    accept(message) {
      this.openNotification('OK', 'WebSocket已连接', message)
      console.log('************', message)
    }
  }
}
</script>


<style>
html {
  font-family:
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
.defaultLayout{
  display:block;
  width:100%;
  height:100%;
}
</style>
